<template>
  <my-dialog
    v-model="dialogVisible"
    :title="isAdd ? '创建访视' : '编辑访视'"
    :width="500"
    :confirm-button-text="isAdd ? '创建' : '提交'"
    @cancel="cancel"
    @close="close"
    @confirm="submit"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <div class="form-line">
        <el-form-item label="访视名称" prop="name" class="name-item">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="基线" prop="baseline" label-width="60px">
          <el-checkbox v-model="form.baseline" />
        </el-form-item>
      </div>
      <!-- <el-form-item label="建议访视期" prop="suggestDate">
        <el-date-picker
          v-model="form.suggestDate"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item label="窗口期" prop="winPhase">
        <el-input-number v-model="form.winPhase" :min="1" :max="10" />
        <span style="margin-left: 10px">天</span>
      </el-form-item>

      <el-form-item label="计划时间" prop="planTime">
        <el-date-picker
          v-model="form.planTime"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="访视时间" prop="visitTime">
        <el-date-picker
          v-model="form.visitTime"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择"
        />
      </el-form-item>
    </el-form>
  </my-dialog>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, reactive, ref, toRefs, watchEffect } from 'vue'

// import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

import MyDialog from '@/components/Dialog/index.vue'

import VisitApi from '@/api/project/visit'

const rules = {
  name: [{ required: true, message: '请输入访视名称', trigger: 'blur' }],
  winPhase: [{ required: true, message: '请输入窗口期', trigger: 'blur' }],
  // suggestDate: [{ required: true, message: '请选择建议访视期', trigger: 'change' }],
  planTime: [{ required: true, message: '请选择计划时间', trigger: 'change' }],
  visitTime: [{ required: true, message: '请选择访视时间', trigger: 'change' }],
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  subId: {
    type: [Number, String],
    default: 0,
  },
  isAdd: {
    type: Boolean,
    default: true,
  },
  detail: {
    type: Object,
    default: () => {},
  },
  centre: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:visible', 'search'])

const dialogVisible: any = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

watchEffect(() => {
  if (!props.isAdd) {
    Object.keys(form).forEach((key: string) => {
      form[key] = toRefs(props.detail)[key]
    })
    // form.winPhase = form.winPhase && form.winPhase * 1
  }
})

const form: any = reactive({
  name: '',
  baseline: false,
  // suggestDate: '',
  winPhase: 1,
  planTime: '',
  visitTime: '',
})

const formRef = ref()

const close = () => {
  formRef.value.resetFields()
}

const cancel = () => {
  dialogVisible.value = false
}

const submit = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const params = {
        ...form,
        subId: props.subId,
      }
      if (!props.isAdd) {
        params.vid = props.detail.vid
      }
      params.centre = props.centre
      const ret = await VisitApi.saveVisit(params)
      if (ret.data) {
        dialogVisible.value = false
        const msg = props.isAdd ? '添加成功！' : '编辑成功！'
        ElMessage({ type: 'success', message: msg })
        emits('search')
      }
    }
  })
}
</script>

<style lang="scss" soped>
.form-line {
  display: flex;
}

.name-item {
  width: 340px;
}

.el-input-number {
  width: 220px;
}
</style>
